<template>
	<div>
		<el-container>
			<el-header>
				<el-row type="flex" align="middle" justify="center">
					<el-col :span="20" >
						<el-menu class="el-menu-demo" mode="horizontal" background-color="#5BC872"
						text-color="#ffffff" style="border-radius: 15px ;">
							<el-row type="flex" align="middle" justify="space-around">
								<router-link to="/home/shop" style="text-decoration:none" >
									<el-menu-item index="1" >保险商城</el-menu-item>
								</router-link>
								<router-link to="/home/service" style="text-decoration:none" >
									<el-menu-item index="2" >客户服务</el-menu-item>
								</router-link>
								<router-link to="/home/personal" style="text-decoration:none" v-if="isLogin===true">
									<el-menu-item index="3" >个人信息</el-menu-item>
								</router-link>
                                <router-link to="/home/mycar" style="text-decoration:none" v-if="isLogin===true">
                                    <el-menu-item index="3" >我的车辆</el-menu-item>
                                </router-link>
                                <router-link to="/home/message" style="text-decoration:none" v-if="isLogin===true">
                                    <el-menu-item index="4" >公告消息</el-menu-item>
                                </router-link>
<!--                                <router-link to="/home/mybaodan" style="text-decoration:none" v-if="isLogin===true">
                                    <el-menu-item index="5" >车辆信息管理</el-menu-item>
                                </router-link>-->
								<el-col :span="1" v-if="isLogin===false">
                                    <el-button round @click="toLogin">注册/登录</el-button>
								</el-col>
                                <el-col :span="1" v-if="isLogin===true">
                                    <el-link @click="toLogin">登出</el-link>
                                </el-col>
							</el-row>
						</el-menu>
					</el-col>
				</el-row>
			</el-header>
			<el-main>
				<el-row type="flex" align="middle" justify="center">
					<el-col :span="20">
						<router-view></router-view>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name : 'home' ,
		data(){
			return{
			    isLogin: false
			}
		},
        created() {
            //在页面加载时读取sessionStorage里的状态信息
            if (sessionStorage.getItem("store") ) {
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
            }
            //在页面刷新时将vuex里的信息保存到sessionStorage里
            window.addEventListener("beforeunload",()=>{
                sessionStorage.setItem("store",JSON.stringify(this.$store.state))
            })

            if(this.$store.state.token===""){}
            else {
                this.isLogin = true;
            }
        },
        methods : {
			toLogin : function( ) {
                let vm = this;
                this.axios({
                    url: '/myapi/user/logout/'+vm.$store.state.token,
                    method: 'get'
                }).then(function (response) {

                });

                this.$store.state.id = '';
                this.$store.state.token = '';
                this.$store.state.baodanid = '';
                this.$store.state.insuranceid = '';
                this.$router.push( '/login' );
			}
		}
	}
</script>

<style>
</style>
